<template>
  <div class="content">
    <h1>Viewer图片预览插件</h1>
    <viewer :images="imgs">
      <img v-for="src in imgs" :src="src.url" :key="src.title" />
    </viewer>
  </div>
</template>
<script>
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
import Vue from 'vue';
Vue.use(Viewer);
Viewer.setDefaults({
  Options: {
    inline: true,
    button: true,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source'
  }
});
export default {
  data() {
    return {
      imgs: [
        {
          url: require('@/assets/images/111.jpg'),
          title: '图片1'
        },
        {
          url:
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '图片2'
        }
      ]
    };
  }
};
</script>
